<template>
	<div class="main">
		<div class="container" ref="mapEl"></div>
	</div>
</template>
<script setup lang="ts">
import remoteLoad from '@/utils/remoteLoad'

const props = defineProps<{
	center?: any
	config?: any
}>()
const emit = defineEmits(['map-onload'])

const mapEl = ref(null)

const initMap = () => {
  if(!mapEl.value) return
	const map = new window.AMap.Map(mapEl.value, {
		resizeEnable: true,
		center: props.center, //地图中心点
		zoom: 13, //地图显示的缩放级别
		keyboardEnable: false,
		...props.config,
	})
	emit('map-onload', map, window.AMap)
}
onMounted(async () => {
	window._AMapSecurityConfig = {
		securityJsCode: 'f73866f3e0bed9c439f64eb90dc0032d',
	}
	// 已载入高德地图API，则直接初始化地图
	if (window.AMap) {
		initMap()
		// 未载入高德地图API，则先载入API再初始化
	} else {
		await remoteLoad(`https://webapi.amap.com/maps?v=2.0&key=11dff32f3843d01094e259eb46326f38`)
		initMap()
	}
})
</script>

<style scoped>
.main {
	width: 100%;
	height: 100%;
	position: relative;
}
.container {
	width: 100%;
	height: 100%;
	position: absolute;
}
</style>
